<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス inputtext</title>
  <othercredit role="translator">
    <firstname>Hiroyuki</firstname>
    <surname>Kato</surname>
        <contrib>2006/05/15　翻訳初版</contrib>
 </othercredit>
<link rel="STYLESHEET" type="text/css" href="./styles.css" /></head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Inputtext">
    <lztier>LFC</lztier>
    <lzcategory>View Basics</lzcategory>
    <lzshortdesc>
            基本となる入力テキスト要素です。
    </lzshortdesc>
    <lztag>tag-inputtext.xml</lztag>
    <lzapi>api-lzinputtext.xml</lzapi>
</lzelement>

<p>このタグはcanvasにユーザがテキストを編集することができる領域を作ります。
これはHTML言語の<code>&lt;input
type="text"&gt;</code>、<code>&lt;input type="password"&gt;</code>,
、そして<code>textarea</code>と同じものです。</p>
<p><attribute>width</attribute>や<attribute>height</attribute>
属性、そしてスクローリングに関する詳細は<tagname link="true">text</tagname>を参照して下さい。
</p>
<h2>単一行の入力テキスト</h2>

<p><attribute>multiline</attribute>と<attribute>password</attribute>
が<code>false</code>に指定されている場合(デフォルトでこの状態です)、
HTML言語の<code>&lt;input type="text"&gt;</code>と似たものになります。
この場合、<attribute>width</attribute>属性によって複数行に渡るテキストは削られます。</p>

<example title="Simple inputtext">&lt;canvas height="20"&gt;
  &lt;inputtext width="150"&gt;This text is editable.&lt;/inputtext&gt;
&lt;/canvas&gt;</example>

<h2>複数行入力テキスト</h2>

<p><attribute>multiline</attribute>属性を<code>true</code>
にすることで、HTML言語でいうところの<code>&lt;textarea&gt;</code>タグと似たものになります。
この場合、<attribute>width</attribute>属性に応じて改行がなされます。
ユーザはEnterを押すことで行を追加していくことができます。</p>

<example title="Simple inputtext">&lt;canvas height="20"&gt;
  &lt;inputtext width="150" multiline="true"&gt;This text is editable.&lt;/inputtext&gt;
&lt;/canvas&gt;</example>

<h2>Passwords</h2>

<p><attribute>password</attribute>属性を<code>true</code>,にすることで、
HTML言語でいうところの<code>&lt;input type="password"&gt;</code>
と似たものになります。入力した文字列はアスタリスク('<code>*</code>')で表示されます。</p>

<example title="Password inputtext">&lt;canvas height="20"&gt;
  &lt;inputtext width="100" password="true"&gt;password.&lt;/inputtext&gt;
&lt;/canvas&gt;</example>


<h2 id="fixedsize-optimization"><code>inputtext</code>を最大限に利用する</h2>

<p>大きな<tagname>inputtext</tagname>要素はキー入力に対する応答が遅くなります。大抵の場合、
スペックのよいマシンでもこの遅れを完全になくすことは不可能です。</p>

<p><tagname>inputtext</tagname>のインスタンスが実行時にリサイズされず、
且つコンパイラがコンパイル時に要素のサイズを決定できるのであればコンパイラは元々のリサイズ可能な
<tagname>inputtext</tagname>の代わりにそのサイズに合わせるよう最適化された
<tagname>inputtext</tagname>を使用することができます。この最適化された
<tagname>inputtext</tagname>は大きなサイズやスペックの低いマシンでも
入力スピードに合わせた表示を行うことができます。</p>

<p><attribute>resizable</attribute>属性を<code>false</code>に設定し、
<attribute>width</attribute>と<attribute>height</attribute>
に適切な値を設定することで最適化された<tagname>inputtext</tagname>を作成することができます。
適切な値には<code>width="100"</code>等の数値リテラルを指定する方法、
<code>$once</code>を使用して一階層上(より上の階層も可)のviewの
<attribute>width</attribute>や<attribute>height</attribute>
の値から設定する方法があります。この方法により、下記の二番目のサンプルのような
classの定義の中に設置された<tagname>inputtext</tagname>タグも最適化することができます。
</p>

<example title="Optimized inputtext">
&lt;canvas height="20"&gt;
  &lt;inputtext resizable="false" width="150" height="20"&gt;
    This text is editable.
  &lt;/inputtext&gt;
&lt;/canvas&gt;
</example>

<example title="Component with optimized inputtext">
&lt;canvas height="20"&gt;
  &lt;class name="mytext" width="150" height="20" bgcolor="gray"&gt;
    &lt;attribute name="text" type="text"/&gt;
    &lt;inputtext resizable="false" text="${parent.text}" bgcolor="white"
      x="1" y="1"
      width="$once{parent.width-2}" height="$once{parent.height-2}"/&gt;
  &lt;/class&gt;
  &lt;mytext&gt;This text is editable.&lt;/mytext&gt;
&lt;/canvas&gt;
</example>

<p>
<attribute>width</attribute>や<attribute>height</attribute>
属性を設定しなかった場合でも、コンパイラが推測してくれることがあります。 設定した場合には
<attribute>font</attribute>属性は最適化されるテキスト領域に合わせた値にしなければなりません。
デフォルトの設定ではフォントサイズのほうが大きい場合、文字は削られてしまい、
入力テキストは親要素のフォントサイズとスタイルを継承します。</p>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
